<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <style>
        *,
        *::after,
        *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* Generic */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-color: #EFE1DB;
        }

        .main {
            position: relative;
            width: 60vw;
            height: 45vw;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            overflow: hidden;
        }

        /* Component */
        .lines {
            width: 100%;
            height: 100%;
            transform: rotateZ(10deg);
        }

        .line-a,
        .line-b,
        .line-c,
        .line-d {
            position: absolute;
            height: .175vw;
            border-radius: 50%;
            background-color: #FFF6EF;
        }

        .line-a {
            width: 12vw;
            bottom: 20vw;
            left: 7vw;
            animation: line-a .15s infinite linear;
        }

        .line-b {
            width: 10vw;
            bottom: 18vw;
            left: 6vw;
            animation: line-b .2s infinite linear;
        }

        .line-c {
            width: 6vw;
            bottom: 12vw;
            left: 12vw;
            animation: line-c .1s infinite linear;
        }

        .line-d {
            width: 6vw;
            bottom: 26vw;
            left: 15vw;
            animation: line-d .135s infinite linear;
        }

        /**/
        .shadows {
            position: absolute;
            top: 13.5vw;
            left: 20.3vw;
            width: 27vw;
            height: 19vw;
            transform-origin: top left;
            transform: rotateZ(10deg);
            z-index: -5;
        }

        .shadow-a,
        .shadow-b,
        .shadow-c,
        .shadow-d {
            position: absolute;
            border-radius: 50%;
        }

        .shadow-a {
            bottom: -.5vw;
            width: 150%;
            left: -25%;
            height: 1vw;
            background-color: rgba(109, 84, 80, 0.5);
            animation: shadow-a .15s infinite linear;
        }

        .shadow-b {
            bottom: -1.5vw;
            width: 100%;
            right: -25%;
            height: .45vw;
            background-color: rgba(109, 84, 80, 0.5);
            animation: shadow-b .175s infinite linear;
        }

        .shadow-c {
            bottom: -4vw;
            left: 100%;
            border-top: 2vw solid rgba(109, 84, 80, 0.5);
            border-right: 2vw solid rgba(109, 84, 80, 0.5);
            border-bottom: 2vw solid transparent;
            border-left: 2vw solid transparent;
            transform-origin: bottom left;
            transform: rotateZ(-45deg);
            opacity: 0;
            animation: shadow-c .45s infinite linear;
        }

        .shadow-c::before {
            content: '';
            position: absolute;
            left: 2vw;
            top: 2vw;
            border-top: 1vw solid rgba(109, 84, 80, 0.75);
            border-right: 1vw solid rgba(109, 84, 80, 0.75);
            border-bottom: 1vw solid transparent;
            border-left: 1vw solid transparent;
            border-radius: 50%;
        }

        .shadow-d {
            bottom: -2vw;
            left: 100%;
            border-top: 1.5vw solid rgba(109, 84, 80, 0.75);
            border-right: 1.5vw solid rgba(109, 84, 80, 0.75);
            border-bottom: 1.5vw solid transparent;
            border-left: 1.5vw solid transparent;
            transform-origin: bottom left;
            transform: rotateZ(-45deg);
            animation: shadow-c 1s infinite linear;
        }

        /**/
        .bicy {
            position: absolute;
            top: 13.5vw;
            left: 17.3vw;
            width: 27vw;
            height: 19vw;
            transform-origin: bottom left;
            transform: rotateZ(10deg);
            animation: bicy .15s infinite linear;
            /**/
            /**/
            /**/
        }

        .bicy__wheel-l,
        .bicy__wheel-r {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            width: 10.8vw;
            height: 10.8vw;
            border: 0.4vw solid #432316;
            border-radius: 50%;
            box-shadow: inset 0.3vw 0.3vw 0 #E9A589, inset -0.3vw -0.3vw 0 #FFF6EF, inset -0.3vw 0.3vw 0 #E9A589, inset 0.3vw -0.3vw 0 #FFF6EF;
        }

        .bicy__wheel-l::before,
        .bicy__wheel-l::after,
        .bicy__wheel-r::before,
        .bicy__wheel-r::after {
            content: '';
            position: absolute;
            width: 70%;
            height: 70%;
            border-radius: 50%;
            border-top: 0.115vw solid #FFF6EF;
            border-bottom: 0.115vw solid #FFF6EF;
            border-left: .115vw solid transparent;
            border-right: .115vw solid transparent;
            animation: wheel .25s infinite linear;
        }

        .bicy__wheel-l::after,
        .bicy__wheel-r::after {
            width: 50%;
            height: 50%;
            border-top: .115vw solid transparent;
            animation: wheel .25s infinite linear;
        }

        .bicy__wheel-l {
            left: 0;
            z-index: -1;
        }

        .bicy__wheel-r {
            right: 0;
        }

        .bicy__fender {
            position: absolute;
            width: 115%;
            height: 125%;
            border-radius: 50%;
            border-top: 0.5vw solid #00665A;
        }

        .bicy__ac {
            position: absolute;
            width: 10.7vw;
            height: 3vw;
            bottom: 4vw;
            left: 4vw;
        }

        .bicy__ac::before {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 99%;
            height: 1.5vw;
            border: 0.3vw solid #3F3E3E;
            border-top: .3vw solid transparent;
            border-bottom-left-radius: 4vw;
            border-bottom-right-radius: 4vw;
        }

        .bicy__ac::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 3vw;
            height: 3vw;
            border-radius: 50%;
            border-left: 0.4vw solid #3F3E3E;
            border-bottom: 0.4vw solid #3F3E3E;
            z-index: -1;
        }

        .bicy__ac-top {
            position: absolute;
            width: 100%;
            height: 2vw;
            border-top-left-radius: 2vw;
            border-top-right-radius: 2vw;
            background-image: linear-gradient(-65deg, #009281 0, #009281 6vw, #FFF6EF 6vw, #FFF6EF 6.3vw, #009281 6.3vw, #009281 6.5vw, #FFF6EF 6.5vw, #FFF6EF 7.5vw, #009281 7.5vw, #009281 8vw, #FFF6EF 8vw);
        }

        .bicy__ac-top::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2vw;
            border-top-left-radius: 2vw;
            border-top-right-radius: 1vw;
            background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 50%, transparent 50%);
        }

        .bicy__part-a,
        .bicy__part-b,
        .bicy__part-c {
            position: absolute;
            bottom: 5.8vw;
            left: 4.25vw;
            width: .7vw;
            height: 7.8vw;
            transform-origin: bottom left;
            transform: rotateZ(37deg);
            background-image: linear-gradient(to right, #FFF6EF 0.25vw, #FEDBC5 0.25vw);
        }

        .bicy__part-a {
            z-index: -1;
        }

        .bicy__part-b {
            left: 13vw;
            height: 8.2vw;
            background-image: linear-gradient(to right, #7ADACC 0.25vw, #009281 0.25vw);
            z-index: -1;
        }

        .bicy__part-c {
            left: 13.2vw;
            bottom: 9vw;
            height: 6.4vw;
        }

        .bicy__part-c::before {
            content: '';
            position: absolute;
            width: 3vw;
            height: .7vw;
            bottom: 0;
            right: .1vw;
            transform-origin: bottom right;
            transform: rotateZ(-37deg);
            background-image: linear-gradient(to bottom, #FFF6EF 0.25vw, #FEDBC5 0.25vw);
        }

        .bicy__part-d {
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 5.8vw;
            left: 12vw;
            width: .9vw;
            height: 9.5vw;
            transform-origin: bottom left;
            transform: rotateZ(-30deg);
            background-image: linear-gradient(to left, #FFF6EF 0.4vw, #FEDBC5 0.4vw);
            z-index: -1;
        }

        .bicy__part-d::before {
            content: '';
            position: absolute;
            top: -3.5vw;
            width: .5vw;
            height: 3.5vw;
            background-image: linear-gradient(to right, #A2A1A0 0.3vw, #d5d5d5 0.3vw);
        }

        .bicy__part-d::after {
            content: '';
            position: absolute;
            width: 3vw;
            height: .9vw;
            top: -4.7vw;
            border-radius: 1vw;
            transform-origin: bottom left;
            transform: rotateZ(30deg) skewX(-20deg);
            background-image: linear-gradient(to bottom, #009281, #00665A);
        }

        .bicy__part-e {
            position: absolute;
            width: .5vw;
            height: 7.2vw;
            right: 5.2vw;
            bottom: 5vw;
            transform-origin: bottom right;
            transform: rotateZ(8deg);
            background-image: linear-gradient(to right, #009281 0.25vw, #7ADACC 0.25vw);
        }

        .bicy__part-f {
            display: flex;
            justify-content: center;
            position: absolute;
            width: .5vw;
            height: 9.2vw;
            right: 5.2vw;
            bottom: 5vw;
            transform-origin: bottom right;
            transform: rotateZ(-25deg);
            background-image: linear-gradient(to right, #009281 0.25vw, #7ADACC 0.25vw);
        }

        .bicy__part-f::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1.5vw;
            top: -1.5vw;
            background-image: linear-gradient(to left, #FFF6EF 0.25vw, #FEDBC5 0.25vw);
        }

        .bicy__part-f::after {
            content: '';
            position: absolute;
            width: 80%;
            height: 1.9vw;
            top: -3.4vw;
            background-image: linear-gradient(to left, #d5d5d5 0.25vw, #A2A1A0 0.25vw);
        }

        .bicy__part-g {
            position: absolute;
            right: 10vw;
            bottom: 16.3vw;
            width: 1.75vw;
            height: 1.75vw;
            transform: rotateZ(25deg) skewY(10deg);
            border-top: 0.2vw solid #d5d5d5;
            border-right: 0.2vw solid #d5d5d5;
            box-shadow: inset -0.1vw 0.1vw 0 #A2A1A0;
        }

        .bicy__part-g::before {
            content: '';
            position: absolute;
            width: 2.5vw;
            height: .5vw;
            transform: rotateZ(-60deg) skewY(0deg) translateY(-1vw) translateX(-1vw);
            border-radius: 1.5vw;
            background-image: linear-gradient(to bottom, #009281, #00665A);
        }

        .bicy__basket {
            position: absolute;
            bottom: 12vw;
            right: 4vw;
            width: 3vw;
            height: 3.5vw;
            background-color: #B96C5C;
            border-top: 0.25vw solid #EBB6A1;
            box-shadow: inset 0 0.25vw 0 #883E30;
        }

        .bicy__basket-a {
            position: absolute;
            width: 125%;
            bottom: 0;
            border-bottom: 0.25vw solid #883E30;
            z-index: 5;
        }

        .bicy__basket-a::before {
            content: '';
            position: absolute;
            width: 2vw;
            height: 3vw;
            left: -.5vw;
            top: -2.8vw;
            background-image: linear-gradient(70deg, #883E30 1.35vw, transparent 1.35vw);
        }

        .bicy__basket-a::after {
            content: '';
            position: absolute;
            width: 2vw;
            height: 2.8vw;
            right: .15vw;
            top: -2.75vw;
            background-image: linear-gradient(-70deg, #EBB6A1 1.35vw, transparent 1.35vw);
        }

        .bicy__basket::before {
            content: '';
            position: absolute;
            top: -.25vw;
            left: -1.75vw;
            width: 1.75vw;
            height: 3.5vw;
            border-top: 0.25vw solid #EBB6A1;
            background-image: linear-gradient(70deg, transparent 1vw, #883E30 1vw);
        }

        .bicy__basket::after {
            content: '';
            position: absolute;
            top: -.25vw;
            right: -1.75vw;
            width: 1.75vw;
            height: 3.5vw;
            border-top: 0.25vw solid #EBB6A1;
            box-shadow: inset 0 0.25vw 0 #883E30;
            background-image: linear-gradient(-70deg, transparent 1vw, #EBB6A1 1vw);
        }

        .human {
            position: absolute;
            top: 6.5vw;
            left: 25vw;
            width: 13.5vw;
            height: 24.5vw;
            transform-origin: top left;
            animation: human .15s infinite linear;
        }

        .human__c {
            animation: human-c .15s infinite alternate;
        }

        .human__head {
            position: absolute;
            right: -2vw;
            top: 2.2vw;
            width: 3.75vw;
            height: 4.5vw;
            transform: rotateZ(10deg);
            animation: human-head 6s infinite;
        }

        .human__neck {
            position: absolute;
            bottom: 0;
            width: 1.3vw;
            height: 1.9vw;
            background-image: linear-gradient(-10deg, transparent 0.2vw, #B35644 0.2vw, #B35644 0.3vw, #FFAC90 0.6vw);
        }

        .human__face-a {
            position: absolute;
            bottom: .1vw;
            right: .5vw;
            width: 2.3vw;
            height: 2vw;
            transform: rotateZ(5deg);
            border-bottom-right-radius: .5vw;
            background-image: linear-gradient(to top, #B35644, #B35644 0.1vw, #FFAC90 0.4vw);
        }

        .human__face-b {
            position: absolute;
            top: .6vw;
            right: .7vw;
            width: 2.4vw;
            height: 2.2vw;
            transform: rotateZ(-20deg);
            overflow: hidden;
            background-color: #FFAC90;
        }

        .human__face-b::before {
            content: '';
            position: absolute;
            bottom: 20%;
            right: 40%;
            width: 3.2vw;
            height: 3.2vw;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, #D45029, #8C1D0B);
            border-bottom: 0.25vw solid #8C1D0B;
        }

        .human__nose {
            position: absolute;
            right: .25vw;
            bottom: 35%;
            width: .9vw;
            height: .9vw;
            transform: rotateZ(-40deg);
            background-color: #FFAC90;
            border-bottom: 0.1vw solid #B35644;
            z-index: -1;
        }

        .human__hair {
            position: absolute;
            left: .35vw;
            top: .4vw;
            width: 3.2vw;
            height: 1.1vw;
            transform: rotateZ(-25deg);
            overflow: hidden;
            animation: human-hair .1s infinite linear alternate;
        }

        .human__hair::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 3.2vw;
            height: 3.2vw;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, #D45029 60%, #8C1D0B);
            border-bottom: 0.25vw solid #8C1D0B;
        }

        .human__ear {
            position: absolute;
            top: 1.8vw;
            left: 1.2vw;
            width: .8vw;
            height: 1vw;
            border-radius: 50%;
            transform: rotateZ(-15deg);
            background-color: #FFAC90;
        }

        .human__cheek {
            position: absolute;
            top: 2.3vw;
            left: 2.2vw;
            width: .8vw;
            height: .6vw;
            border-radius: 50%;
            transform: rotateZ(-15deg);
            background-color: rgba(212, 80, 41, 0.35);
            filter: blur(2px);
        }

        .human__mouth {
            position: absolute;
            right: .4vw;
            bottom: 20%;
            width: .8vw;
            height: .5vw;
            transform: rotateZ(5deg);
            overflow: hidden;
        }

        .human__mouth::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 2.5vw;
            height: 1vw;
            border-radius: 50%;
            border-bottom: 0.2vw solid #EFE1DB;
        }

        .human__eye {
            position: absolute;
            top: 1.9vw;
            right: .65vw;
            width: .55vw;
            height: .15vw;
            background-color: #101010;
            border-radius: 50%;
            transform: rotateZ(-35deg);
            animation: human-eye 6s infinite;
        }

        .human__eye::before {
            content: '';
            position: absolute;
            width: 130%;
            height: .19vw;
            right: -.31vw;
            top: -.4vw;
            background-color: #101010;
            transform: skewX(-30deg);
        }

        .human__backpack {
            position: absolute;
            top: 5.2vw;
            left: 2.5vw;
            width: 6.5vw;
            height: 1.35vw;
            transform-origin: top left;
            transform: rotateZ(-20deg);
            border-top-right-radius: 3vw;
            border-bottom-left-radius: .5vw;
            border-bottom-right-radius: .5vw;
            background-image: linear-gradient(to bottom, #883E30, #3d1c15);
        }

        .human__backpack::before {
            content: '';
            position: absolute;
            top: -.5vw;
            width: 2.5vw;
            height: .5vw;
            border-top-right-radius: 2vw;
            border-top-left-radius: .5vw;
            background-image: linear-gradient(to right, #622d23 30%, #009281 30%, #009281 40%, #883E30 40%, #883E30 50%, #009281 50%);
        }

        .human__backpack::after {
            content: '';
            position: absolute;
            top: 30%;
            width: 93%;
            height: .2vw;
            background-color: #B96C5C;
        }

        .human__chest {
            position: absolute;
            top: 7.2vw;
            left: 1vw;
            width: 10vw;
            height: 3.2vw;
            transform-origin: top left;
            transform: rotateZ(-20deg);
            border-top-right-radius: 2vw;
            border-bottom-right-radius: 1vw;
            background-image: linear-gradient(to bottom, #FFF6EF 2vw, #FEDBC5);
        }

        .human__chest::before {
            content: '';
            position: absolute;
            top: -.4vw;
            right: -2vw;
            width: 4vw;
            height: 3vw;
            transform-origin: top left;
            transform: rotateZ(30deg);
            background-image: linear-gradient(-35deg, transparent 1vw, #FEDBC5 1vw, #FFF6EF 2vw);
        }

        .human__chest::after {
            content: '';
            position: absolute;
            top: -.5vw;
            right: -.5vw;
            width: 7vw;
            height: 3.5vw;
            border-top-left-radius: 1vw;
            border-top-right-radius: 5vw;
            border-bottom-left-radius: 4vw;
            border-bottom-right-radius: 3vw;
            border: 0.4vw solid #622d23;
        }

        .human__arm-l {
            position: absolute;
            top: 5.45vw;
            left: 5.5vw;
            width: 5.5vw;
            height: 2vw;
            border-radius: 2vw;
            transform: rotateZ(-25deg);
            background-image: linear-gradient(to bottom, #FFAC90 80%, #B35644 90%);
        }

        .human__arm-l::before {
            content: '';
            position: absolute;
            right: 0;
            width: 55%;
            height: 100%;
            border-top-right-radius: 2vw;
            border-bottom-right-radius: 2vw;
            background-image: linear-gradient(to bottom, #FFF6EF 70%, #FEDBC5 90%);
            border-left: 0.25vw solid #B35644;
        }

        .human__arm-l-a {
            position: absolute;
            bottom: -3.5vw;
            left: -.02vw;
            width: 1.5vw;
            height: 4.5vw;
            transform-origin: top left;
            transform: rotateZ(-25deg);
            background-image: linear-gradient(100deg, #FFAC90 1.55vw, transparent 1.55vw);
        }

        .human__arm-l-a::before {
            content: '';
            position: absolute;
            bottom: -1.75vw;
            left: -.125vw;
            width: 1vw;
            height: 2vw;
            border-top-left-radius: 1.5vw;
            border-top-right-radius: 1.5vw;
            border-bottom-left-radius: 2vw;
            border-bottom-right-radius: 4vw;
            background-color: #FFAC90;
        }

        .human__arm-r {
            position: absolute;
            top: 5.45vw;
            left: 6vw;
            width: 5.5vw;
            height: 2vw;
            border-radius: 2vw;
            transform: rotateZ(-25deg);
            background-image: linear-gradient(to bottom, #FFAC90 80%, #B35644 90%);
            z-index: -5;
        }

        .human__arm-r::before {
            content: '';
            position: absolute;
            right: 0;
            width: 55%;
            height: 100%;
            border-top-right-radius: 2vw;
            border-bottom-right-radius: 2vw;
            background-color: #FFF6EF;
            border-left: 0.25vw solid #B35644;
        }

        .human__arm-r-a {
            position: absolute;
            bottom: -3.5vw;
            left: -.02vw;
            width: 1.5vw;
            height: 4.5vw;
            transform-origin: top left;
            transform: rotateZ(-25deg);
            background-image: linear-gradient(100deg, #B35644 1.55vw, transparent 1.55vw);
        }

        .human__arm-r-a::before {
            content: '';
            position: absolute;
            bottom: -1.75vw;
            left: -.125vw;
            width: 1vw;
            height: 2vw;
            border-top-left-radius: 1.5vw;
            border-top-right-radius: 1.5vw;
            border-bottom-left-radius: 2vw;
            border-bottom-right-radius: 4vw;
            background-color: #B35644;
        }

        .human__leg-l {
            position: absolute;
            top: 8vw;
            width: 2.5vw;
            height: 10vw;
            transform-origin: top left;
            transform: rotateZ(-35deg);
            border-top-left-radius: 1vw;
            border-top-right-radius: 1vw;
            background-image: linear-gradient(-82deg, transparent 0.775vw, #3F3E3E 0.775vw, #3F3E3E 1.75vw, #101010 1.75vw);
            animation: human-legg .15s infinite alternate;
        }

        .human__leg-l-a {
            position: absolute;
            bottom: -5.25vw;
            right: .5vw;
            height: 6.5vw;
            width: 2.5vw;
            transform-origin: top left;
            transform: rotateZ(30deg);
            border-top-left-radius: 2vw;
            background-image: linear-gradient(82deg, transparent 1.1vw, #101010 1.1vw, #101010 2.3vw, #3F3E3E 2.3vw);
        }

        .human__leg-l-a::before {
            content: '';
            position: absolute;
            bottom: -1.25vw;
            right: .1vw;
            width: .75vw;
            height: 1.25vw;
            background-image: linear-gradient(to bottom, #B35644 0.25vw, #FFAC90 0.25vw);
        }

        .human__leg-l-a::after {
            content: '';
            position: absolute;
            bottom: -3.5vw;
            left: 1.2vw;
            width: 4vw;
            height: 1.5vw;
            border-left: 4vw solid #101010;
            border-top: 1vw solid transparent;
            border-bottom: 1vw solid transparent;
            border-right: 1vw solid transparent;
            border-radius: 1vw;
            transform: rotateZ(20deg);
        }

        .human__leg-l-b {
            position: absolute;
            bottom: -8.75vw;
            right: 3.9vw;
            height: .5vw;
            width: 2.5vw;
            transform: rotateZ(35deg);
            background-image: linear-gradient(to bottom, #009281, #00665A);
        }

        .human__leg-r {
            position: absolute;
            top: 9vw;
            left: .5vw;
            width: 2.5vw;
            height: 10vw;
            transform-origin: top left;
            transform: rotateZ(-70deg);
            border-top-left-radius: 1vw;
            border-top-right-radius: 1vw;
            background-image: linear-gradient(-82deg, transparent 0.775vw, #101010 0.775vw);
            z-index: -5;
        }

        .human__leg-r-a {
            position: absolute;
            bottom: -4vw;
            right: .5vw;
            height: 6.5vw;
            width: 2.5vw;
            transform-origin: top left;
            transform: rotateZ(95deg) translateY(-2.2vw);
            border-top-left-radius: 2vw;
            background-image: linear-gradient(82deg, transparent 1.1vw, #101010 1.1vw);
        }

        .human__leg-r-a::before {
            content: '';
            position: absolute;
            bottom: -1.25vw;
            right: .1vw;
            width: .75vw;
            height: 1.25vw;
            background-image: linear-gradient(to bottom, #8e4436 0.25vw, #B35644 0.25vw);
        }

        .human__leg-r-a::after {
            content: '';
            position: absolute;
            bottom: -3.5vw;
            left: 1.2vw;
            width: 4vw;
            height: 1.5vw;
            border-left: 4vw solid #101010;
            border-top: 1vw solid transparent;
            border-bottom: 1vw solid transparent;
            border-right: 1vw solid transparent;
            border-radius: 1vw;
            transform: rotateZ(20deg);
        }

        .dog {
            position: absolute;
            bottom: 14.75vw;
            right: 3vw;
            width: 5.2vw;
            height: 4.5vw;
            animation: dog .075s infinite linear alternate;
        }

        .dog__head {
            position: absolute;
            left: 2vw;
            top: .675vw;
            width: 2vw;
            height: 2.25vw;
            border-radius: 1.5vw;
            background-color: #FFF6EF;
        }

        .dog__head::after {
            content: '';
            position: absolute;
            top: .5vw;
            right: .4vw;
            width: .6vw;
            height: .125vw;
            border-radius: 50%;
            background-color: #101010;
            transform: rotateZ(-30deg);
        }

        .dog__body {
            position: absolute;
            bottom: 0;
            left: 1.75vw;
            width: 2.5vw;
            height: 3vw;
            transition: bottom left;
            transform: rotateZ(15deg);
            background-image: linear-gradient(70deg, #FFF6EF 2.5vw, transparent 2.5vw);
            overflow: hidden;
        }

        .dog__body::before {
            content: '';
            position: absolute;
            right: 60%;
            bottom: 0;
            width: 2vw;
            height: 2vw;
            border-radius: 50%;
            background-image: linear-gradient(to right, #D45029, #8C1D0B);
        }

        .dog__mouth-a {
            position: absolute;
            top: 1vw;
            right: 0;
            width: 2vw;
            height: 1vw;
            transform: rotateZ(-15deg);
            border-bottom-right-radius: 1vw;
            background-color: #FFF6EF;
            z-index: -1;
        }

        .dog__mouth-a::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: .4vw;
            height: .3vw;
            border-radius: 1vw;
            background-color: #101010;
        }

        .dog__mouth-b {
            position: absolute;
            top: 2.5vw;
            right: .2vw;
            width: 1.5vw;
            height: .5vw;
            transform: rotateZ(-15deg);
            border-bottom-right-radius: 1vw;
            background-color: #FFF6EF;
        }

        .dog__ear {
            position: absolute;
            top: 1.35vw;
            width: 2.25vw;
            height: 1.45vw;
            transform: rotateZ(-15deg);
            border-top-left-radius: .25vw;
            border-bottom-left-radius: .75vw;
            background-image: linear-gradient(-10deg, transparent 0.25vw, #FFF6EF 0.25vw);
            overflow: hidden;
            animation: dog-ear .075s infinite linear alternate;
        }

        .dog__ear::before {
            content: '';
            position: absolute;
            bottom: 60%;
            width: 1.5vw;
            height: 1.5vw;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, #D45029, #8C1D0B);
        }

        .dog__ear::after {
            content: '';
            position: absolute;
            bottom: 80%;
            right: 0;
            width: 1vw;
            height: 1vw;
            border-radius: 50%;
            background-image: linear-gradient(to bottom, #D45029, #8C1D0B);
        }

        .dog__tongue {
            position: absolute;
            top: 2vw;
            right: 1vw;
            width: .5vw;
            height: 1.25vw;
            background-image: linear-gradient(to top, #D45029, #8C1D0B);
            transform: rotateZ(25deg);
            border-top-left-radius: 2vw;
            border-top-right-radius: 3vw;
            border-bottom-left-radius: 1.5vw;
            border-bottom-right-radius: 3vw;
            animation: dog-tongue .075s infinite linear alternate;
        }

        .heart {
            position: absolute;
            width: 1vw;
            height: 1vw;
            right: 7vw;
            background-color: #d02323;
            transform: rotateZ(-50deg);
            animation: heart 6s infinite linear, heart-opacity 6s infinite linear;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 1vw;
            height: 1vw;
            border-radius: 50%;
            background-color: #d02323;
        }

        .heart::before {
            bottom: 50%;
        }

        .heart::after {
            left: 50%;
        }

        /***********/
        /***********/
        @keyframes bicy {

            0%,
            100% {
                top: 13.5vw;
                transform: rotateZ(10deg) scaleY(1);
            }

            20% {
                top: 13.65vw;
                transform: rotateZ(10deg) scaleY(0.998);
            }

            40% {
                top: 13.55vw;
                transform: rotateZ(10deg) scaleY(0.9975);
            }

            60% {
                top: 13.5vw;
                transform: rotateZ(10deg) scaleY(0.998);
            }

            80% {
                top: 13.6vw;
                transform: rotateZ(10deg scaleY(1));
            }
        }

        @keyframes human {

            0%,
            100% {
                top: 6.5vw;
                left: 25vw;
            }

            20% {
                top: 6.6vw;
                left: 25vw;
            }

            40% {
                top: 6.55vw;
                left: 25vw;
            }

            60% {
                top: 6.45vw;
                left: 25vw;
            }

            80% {
                top: 6.6vw;
                left: 25vw;
            }
        }

        @keyframes human-head {

            0%,
            70%,
            100% {
                transform-origin: bottom left;
                transform: rotateZ(0);
            }

            80%,
            95% {
                transform-origin: bottom left;
                transform: rotateZ(10deg);
            }
        }

        @keyframes human-eye {

            0%,
            65%,
            100% {
                height: .15vw;
                top: 1.9vw;
                transform: rotateZ(-35deg);
            }

            75%,
            95% {
                height: .2vw;
                top: 2vw;
                transform: rotateZ(-20deg);
            }
        }

        @keyframes heart {

            0%,
            75% {
                transform: translateY(0) rotateZ(-50deg) scaleZ(0);
            }

            85%,
            95% {
                transform: translateY(-2.5vw) rotateZ(-50deg) scaleZ(1);
            }

            100% {
                transform: translateY(-6vw) rotateZ(-50deg) scaleZ(0);
            }
        }

        @keyframes heart-opacity {

            0%,
            75% {
                opacity: 0;
            }

            85%,
            90% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes human-hair {
            to {
                transform: rotateZ(-35deg);
            }
        }

        @keyframes human-c {
            to {
                transform-origin: bottom left;
                transform: rotateZ(-0.75deg);
            }
        }

        @keyframes human-leg {
            to {
                transform: translateY(-0.1vw) rotateZ(-35deg);
            }
        }

        @keyframes wheel {
            to {
                transform: rotateZ(1turn);
            }
        }

        @keyframes line-a {
            to {
                width: 10.8vw;
                bottom: 19.85vw;
                left: 0vw;
            }
        }

        @keyframes line-b {
            to {
                width: 6.9vw;
                bottom: 17.9vw;
                left: 1vw;
            }
        }

        @keyframes line-c {
            to {
                width: 3.9vw;
                bottom: 12vw;
                left: 0vw;
            }
        }

        @keyframes line-d {
            to {
                width: 3vw;
                bottom: 25.95vw;
                left: 1vw;
            }
        }

        @keyframes shadow-a {
            to {
                height: .9vw;
                width: 148%;
            }
        }

        @keyframes shadow-b {
            to {
                height: .425vw;
                width: 95%;
            }
        }

        @keyframes shadow-c {
            0% {
                left: 100%;
                opacity: 0;
            }

            50% {
                left: 50%;
                opacity: 1;
            }

            100% {
                left: 0%;
                opacity: 0;
            }
        }

        @keyframes dog {
            to {
                right: 3.1vw;
                bottom: 14.7vw;
            }
        }

        @keyframes dog-ear {
            to {
                transform-origin: top left;
                top: 1.3vw;
                transform: rotateZ(-10deg);
            }
        }

        @keyframes dog-tongue {
            to {
                transform: rotateZ(45deg);
                height: 1.2vw;
            }
        }
    </style>
</head>

<body>
    
    <div class="main">
        <p style="color: rgb(14, 170, 241);"><span>嗯,你是淑女,不会踩单车,</span><span>那就祝你开(坐)好车且出入平安</span><br><span>但要记住哦,道路千万条,安全第一条,开车就不要穿拖鞋了</span></p>
        <div class="lines">
            <div class="line-a"></div>
            <div class="line-b"></div>
            <div class="line-c"></div>
            <div class="line-d"></div>
        </div>
        <div class="bicy">
            <div class="heart"></div>
            <div class="dog">
                <div class="dog__ear"> </div>
                <div class="dog__head"> </div>
                <div class="dog__body"></div>
                <div class="dog__mouth-a"></div>
                <div class="dog__mouth-b"></div>
                <div class="dog__tongue"></div>
            </div>
            <div class="bicy__wheel-l">
                <div class="bicy__fender"></div>
            </div>
            <div class="bicy__wheel-r">
                <div class="bicy__fender"></div>
            </div>
            <div class="bicy__ac">
                <div class="bicy__ac-top"></div>
            </div>
            <div class="bicy__parts">
                <div class="bicy__part-a"></div>
                <div class="bicy__part-b"></div>
                <div class="bicy__part-c"></div>
                <div class="bicy__part-d"></div>
                <div class="bicy__part-e"></div>
                <div class="bicy__part-f"></div>
                <div class="bicy__part-g"></div>
            </div>
            <div class="bicy__basket">
                <div class="bicy__basket-a"></div>
            </div>
        </div>
        <div class="shadows">
            <div class="shadow-a"></div>
            <div class="shadow-b"></div>
            <div class="shadow-c"></div>
            <div class="shadow-d"></div>
        </div>
        <div class="human">
            <div class="human__c">
                <div class="human__head">
                    <div class="human__neck"></div>
                    <div class="human__face-a"></div>
                    <div class="human__face-b"></div>
                    <div class="human__nose"></div>
                    <div class="human__hair"></div>
                    <div class="human__cheek"></div>
                    <div class="human__ear"></div>
                    <div class="human__mouth"></div>
                    <div class="human__eye"></div>
                </div>
                <div class="human__chest"></div>
                <div class="human__backpack"></div>
            </div>
            <div class="human__arm-r">
                <div class="human__arm-r-a"></div>
            </div>
            <div class="human__arm-l">
                <div class="human__arm-l-a"></div>
            </div>
            <div class="human__leg-r">
                <div class="human__leg-r-a"></div>
            </div>
            <div class="human__leg-l">
                <div class="human__leg-l-a"></div>
                <div class="human__leg-l-b"></div>
            </div>
        </div>
    </div>
</body>

</html>